<template>
  <div class="fli_list">
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div class="sma_box">
      <el-form :inline="true" :model="arr" class="demo-form-inline">
        <el-form-item label="出发城市">
          <el-input v-model="arr.depCity" disabled></el-input>
        </el-form-item>
        <el-form-item label="到达城市">
          <el-input v-model="arr.arrivalCity" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker @change="depChange" v-model="arr.departureTime" value-format="yyyy-MM-ddTHH:mm:ss" type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <template>
            <el-button type="primary" @click="againConfirm('arr')">重新搜索</el-button>
            <el-button @click="resetForm('arr')">清空缓存</el-button>
          </template>
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 265px">
        <el-tab-pane label="起飞时间从早到晚" name="first" @click="filtrates" data-type="runtime"></el-tab-pane>
        <el-tab-pane label="舱位价格从低到高" name="second" @click="filtrates" data-type="departtime"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="sma_box">
      <el-form :model="screend" class="demo-form-inline">
        <el-form-item label="起飞时段" class="screened">
          <el-radio-group v-model="screend.type">
            <el-radio :label="item.timez" v-for="(item, index) in timeList" :key="index"
              @change="timeChange($event)"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="舱位" class="screened">
          <el-radio-group v-model="GoSearchWhere.cabin">
            <el-radio :label="item.id" v-for="(item, index) in spaceList" :key="index"
              @change="spaceChange($event,index)">{{ item.space }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="机型" class="screened">
          <el-radio-group v-model="screend.airType">
            <el-radio :label="item.id" v-for="(item, index) in typeList" @change="typeChange($event)" :key="index"
              :value="item.is">{{ item.type }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="fli_box1" id="table" v-loading="loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)" :data="flightVos"
      style="width: 100%">
      <div v-for="(item, index) in flightVos" :key="index">
        <div class="sma_boxed">
          <div class="box_o">
            <div class="o_l"> <img :src="item.airlineGif" /></div>
            <div class="o_r">
              <span>{{ item.airline }}:{{ item.flightNo }}</span><span
                v-if="item.planeTypeDesc">机型:{{ item.planeTypeDesc }}</span>
            </div>
          </div>
          <div class="box_s">
            <div>
              <span class="box_time">{{ getset1(item.depDate) }}</span>
              <span class="namesed">{{ item.orgAirportName }}{{ item.depTerm }}</span>
            </div>
            <div class="box_th">
              <img class="image" src="../../assets/aircraft52.png" alt="" /><span>{{
              item.flightTimes
            }}</span>
            </div>
            <div>
              <span class="box_time">{{ getset1(item.arrDate) }}</span>
              <span class="names">{{ item.dstAirportName }}{{ item.arrTerm }}</span>
            </div>
          </div>
          <div class="box_o">餐食:{{ item.meal?item.meal:'无餐食' }}</div>
          <div class="box_f">
            <div class="f_top">
              <div class="top_mon">
                ¥<span class="moneyed">{{item.listCabinInfo[0].price}}</span>起 (含税)
              </div>
              <!-- <div>(含保险 $789 含套餐费)</div> -->
            </div>
            <div>
              <el-row>
                <el-button type="primary" @click="open(index)">订票</el-button>
              </el-row>
            </div>
          </div>
        </div>
        <div v-if="item.is">
          <div class="fli_box" v-for="(items, index) in item.listCabinInfo" :key="index">
            <div class="f_box">
              <!-- <div class="box_t">特价</div> -->
              <!-- <div>欢乐抢</div> -->
              <div v-if="items.baseCabinName">{{items.baseCabinName}}</div>
            </div>
            <el-tooltip effect="light" placement="top">
              <div class="f_box_t">
                <!-- <div class="t_text">行李额23KG</div>
            <div class="t_text1">无餐食</div>
            <div class="t_text1">免费改期</div> -->
                <div class="t_text" v-if="items.baggage">{{items.baggage}}</div>
                <div class="t_text2">{{ items.cabin }}舱</div>
              </div>
              <div slot="content">
                <div slot="content">
                  <div>
                    行李额：
                  </div>
                  <div>{{items.baggage?items.baggage:'无'}} </div>
                  <div>
                    更改条件：
                  </div>
                  <div>{{items.change?items.change:'无'}} </div>
                  <div>
                    退票条件：
                  </div>
                  <div>{{items.refund?items.refund:"无"}} </div>
                </div>
              </div>
            </el-tooltip>
            <div>
              ￥<span class="money">{{ items.price }}</span>含税
            </div>
            <!-- <div class="f_box_s">
            <div class="s_quan">
              旅游券<img class="quan_img" src="../../assets/logo.png" alt="" />
            </div>
            <div>抵用50</div>
          </div> -->
            <div class="f_box_f">
              <div class="f_seat">
                {{
                items.cabinLeftDesc == "座位充足"
                  ? items.cabinLeftDesc
                  : "剩余" + items.cabinLeftDesc + "张"
              }}
              </div>
              <div>
                <el-row>
                  <el-button v-if="items.price" @click="flightdetails(item,index)" class="primary" type="primary">预定</el-button>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import crumbs from "../../components/Crumbs.vue";
  import formatTime from "../../common/formatTime.js";
  import {
    Loading
  } from "element-ui";
  export default {
    name: "flightlist",
    components: {
      crumbs,
      formatTime,
      Loading
    },
    data() {
      return {
        loading: false,
        timeList: [{
            id: 0,
            time: "06:00",
            times: "12:00",
            timez: '上午(6-12点)',
            is: false,
          },
          {
            id: 1,
            time: "12:00",
            times: "18:00",
            timez: '下午(12-18点)',
            is: false,
          },
          {
            id: 2,
            time: "18:00",
            times: "24:00",
            timez: '晚上(18-24点)',
            is: false,
          },
          {
            id: 3,
            time: "00:00",
            times: "24:00",
            timez: '不限',
            is: false,
          },
        ],
        orders: [],
        typeList: [{
            id: "大",
            type: "大机型",
            is: false,
          },
          {
            id: "中",
            type: "中机型",
            is: false,
          },
          {
            id: "小",
            type: "小机型",
            is: false,
          },
          {
            id: "",
            type: "不限",
            is: false,
          },
        ],
        spaceList: [{
            id: "0",
            space: "经济舱",
            is: false,
          },
          {
            id: "1",
            space: "公务/头等舱",
            is: false,
          },
          {
            id: "2",
            space: "不限",
            is: false,
          },
        ],
        BreadCrumb: [{
            path: "/flight/reserve",
            name: "机票查询"
          },
          {
            path: "/reserve/ticketchanging",
            name: "机票改签"
          }
        ],
        filIndex: 0,
        filteractive: 'runtime',
        // 航程
        TripTypeList: ["单程", "往返-组合", "往返-自由搭配"],
        // GoSearchWhere: this.$route.params.GoSearchWhere,
        // TripType: this.$route.params.TripType,
        // 航班中转
        GoSearchWhere: {
          TripType: '',
          cabin: "",
        },
        arr: {},
        activeName: "",
        value1: "",
        index: '',
        screend: {
          time: "",
          cabin: "",
          airType: "",
          carrier: "",
        },
        flightVos: [],
        flightVoss:[],
        type: [],
        formInline: {},
        recommend: false,
        shippingtype: 0,
        reslength: null,
      };
    },
    created() {},
    methods: {
      showLoading() {
        this.tableLoading = this.$loading({
          text: "拼命加载数据中", //显示在加载图标下方的加载文案
          spinner: "el-icon-loading", //自定义加载图标类名
          background: "rgba(0, 0, 0, 0.3)", //遮罩层颜色
          target: document.querySelector("#table"), //loadin覆盖的dom元素节点
        });
      },
      closeLoading() {
        this.tableLoading.close();
      },
      handleClick() {},
      getset1(val) {
        if(!val) return false;
        var value = val.split(" ");
        var times = value[0];
        var timez = value[1].split(":");
        // console.log(times)
        var array = timez[0] + ":" + timez[1];
        return array;
      },
      // 查看所有舱位
      open(index) {
        this.$set(this.flightVos[index],"is", !this.flightVos[index].is)
        this.filIndex = index
      },
      depChange() {
        console.log(this.arr.departuretime);
      },
      typeChange(val) {
        this.typeList.forEach((item)=>{
          item.is = item.id === val
        })
        this.confirm(this.flightVoss);
      },
      spaceChange(val, index) {
        this.spaceList.forEach((item)=>{
          item.is = item.id === val
        })
        this.confirm(this.flightVoss);
      },
      timeChange(val) {
        console.log(val)
        this.timeList.forEach((item)=>{
          item.is = item.timez === val
        })
        this.confirm(this.flightVoss);
      },
      // 确定
      confirm(row) {
        let list = this.flightVoss;
        let spaceList = this.spaceList;
        let type;
        if (spaceList[0].is == true) {
          type = 0;
        } else if (spaceList[1].is == true) {
          type = 1;
        } else {
          type = 2;
        }
        if (row) {
          // //console.log(row)
          this.shippingtype = type,
          this.flightVos = this.screen(list, type)
        } else {
          this.shippingtype = type
        }
      },
      // 舱位筛选
      // 舱位筛选
      bindshippingtype(row, type) {
        let lingshi = JSON.parse(JSON.stringify(row));
        let filterName = ""
        if (type == 0) filterName = "经济舱"
        if (type == 1) filterName = "经济舱"
        for (let i = 0; i < lingshi.length; i++) {
          let list = []
          for (let j = 0; j < lingshi[i].listCabinInfo.length; j++) {
            list = JSON.parse(JSON.stringify(lingshi[i].listCabinInfo)) 
            list.sort(function (a, b) {
              return a.price > b.price ? 1 : -1;
            });
            if(filterName){
              list = list.filter((item)=>{
                if (type == 0) return item.baseCabinName == filterName;
                if (type == 1) return item.baseCabinName != filterName;
              })
            }
            lingshi[i].listCabinInfo = list
            
          }
        }
        lingshi = lingshi.filter((item)=>{
          if(item.listCabinInfo.length){
            return lingshi;
          }
        })
        return lingshi;
      },
      // 起飞时间
      departuretime(row) {
        let timeList = this.timeList;
        let arr = [];
        let is = [];
        console.log(timeList)
        for (let i = 0; i < row.length; i++) {
          for (let j = 0; j < timeList.length; j++) {
            if (timeList[j].is == true) {
              if (
                row[i].depDate.split(" ")[1] >= timeList[j].time &&
                row[i].depDate.split(" ")[1] < timeList[j].times
              ) {
                arr.push(row[i]);
              }
              is.push(true);
            }
          }
        }
        if (is.length == 0) {
          return row;
        }
        return arr;
      },
      // 机型筛选
      typescreen(row) {
        let arr = [];
        let is = [];
        let typeList = this.typeList;
        for (let i = 0; i < row.length; i++) {
          for (let j = 0; j < typeList.length; j++) {
            if (typeList[j].is == true) {
              if (row[i].airlineType == typeList[j].id) {
                arr.push(row[i]);
              }
              if (!typeList[j].id)arr.push(row[i]);
              is.push(true);
            }
          }
        }
        if (is.length == 0) {
          return row;
        }
        return arr;
      },
      // 机票列表
      getchangeSearchFlight() {
        this.loading = true;
        let arr = this.arr
        console.log( arr)
  
        this.$axios
          .getchangeSearchFlight({
            dstAirport: arr.dstAirport,
            orgAirport: arr.orgAirport,
            passengerName:this.orders[0].passengerName,
            passengerType:this.orders[0].passengerType,
            queryDepDate: arr.departureTime,
            ticketNo: arr.ticketNo,
            channelType:arr.channelType,
          })
          .then((res) => {
            this.loading = false;
            if (res.code == "00000") {
              if (res.data == '') {
                this.$confirm('当天无可改签航班', '提示', {
                  confirmButtonText: '确定',
                  type: 'warning'
                })
              } else {
                console.log(res);
                let flightVos = JSON.parse(JSON.stringify(res.data));
                let list = JSON.stringify(flightVos);
                // 时段显示的最低价格数据源
                let type = 2;
                // this.seltimeframeprice(this.bindshippingtype(flightVos,type))
                let arr = [];
                for (let i = 0; i < flightVos.length; i++) {
                  flightVos[i].listCabinInfo.filter(item => {
                    return item.price
                  })
                }
                this.bindshippingtype(flightVos, type)
                flightVos.map((item) => {
                  item.is = false;
                  arr.push(item.airline);
                });
                let arr1 = [];
                // // //console.log(arr)
                for (let i = 0; i < arr.length; i++) {
                  for (let j = i + 1; j < arr.length; j++) {
                    if (arr[i] == arr[j]) {
                      j = ++i;
                    }
                  }
                  arr1.push(arr[i]);
                }
                for (let z = 0; z < arr1.length; z++) {
                  let obj = {
                    id: z,
                    airline: arr1[z],
                    is: false,
                  };
                }
                this.flightVos = this.screen(flightVos, 0);
                this.flightVoss = JSON.parse(list)
              }
            }
          });
      },
      // 时间排序
      filtrates(e) {
        let list = this.flightVos
        let _this = this
        if (this.filteractive == e.currentTarget.dataset.type) {} else {
          // //console.log(e.currentTarget.dataset.type)
          this.filteractive = e.currentTarget.dataset.type,
            list = this.pricedata(list),
            this.flightVos = list
        }
      },
      // 筛选
      screen(list, type) {
        // 隐藏共享航班
        // list = this.sharecode(list)
        // console.log(list)
        // 起飞时间
        list = this.departuretime(list)
        // console.log(list)
        // 机型
        list = this.typescreen(list)
        // console.log(list)
        // 舱位筛选
        list = this.bindshippingtype(list, type)
        // console.log(list)
        // 价格时间排序
        list = this.pricedata(list)
        return list
      },
      // 时间排序
      filtrates(e) {
        console.log(e)
        let list = this.flightVos
        let _this = this
        if (this.filteractive == e.currentTarget.dataset.type) {} else {
          // //console.log(e.currentTarget.dataset.type)
          this.filteractive = e.currentTarget.dataset.type,
            list = this.pricedata(list),
            this.flightVos = list
        }
        
      },
      againConfirm() {
        this.getchangeSearchFlight()
      },
      // 价格时间排序
      pricedata(row) {
        // 价格排序
        //console.log(this.data.filteractive)
        //console.log(row)
        if (this.filteractive == 'departtime') {
          // //console.log('价格')
          row.sort(function (a, b) {
            return a.listCabinInfo[0].price > b.listCabinInfo[0].price ? 1 : -1
          })
          return row
        }
        // 时间排序
        if (this.filteractive == 'runtime') {
          // //console.log('时间')
          row.sort(function (a, b) {
            return a.depDate > b.depDate ? 1 : -1
          })
          return row
        }
      },
      // 航班详情
      flightdetails(item, index) {
        console.log(item, index, this.filIndex)
        let list = this.GoSearchWhere
        // let arr = this.orders
        let flightVos = this.flightVos
        let GoSearchWhere = {
          passengerName:this.orders[0].passengerName,
          passengerType:this.orders[0].passengerType,
          // airline:flightVos[index].
          newFlightNo: flightVos[this.filIndex].flightNo,
          departureTime: flightVos[this.filIndex].depDate,
          arrTime: flightVos[this.filIndex].arrDate,
          planeStyle: flightVos[this.filIndex].airlineType,
          orderId: this.arr.orderId,
          ticketNo: this.arr.ticketNo,
          oilFee: flightVos[this.filIndex].fuelTax ? flightVos[this.filIndex].fuelTax : 0,
          tax: flightVos[this.filIndex].airportTax ? flightVos[this.filIndex].airportTax : 0,
          orgTerminal: flightVos[this.filIndex].orgAirport,
          dstTerminal: flightVos[this.filIndex].dstAirport,
          ticketAmount: flightVos[this.filIndex].listCabinInfo[index].price,
          cabin: flightVos[this.filIndex].listCabinInfo[index].cabin,
          flightNo: flightVos[this.filIndex].flightNo,
          OrgAirport: this.arr.depCity,
          channelType: flightVos[this.filIndex].channelType,
          DstAirport: this.arr.arrivalCity
        }
        // return;
        this.$router.push({
          name: "flightschedule",
          params: {
            GoSearchWhere: GoSearchWhere,
            type: 'change',
            orders: this.orders,
            item: item,
            userList: this.$route.params.userList
          },
        });
      },

    },
    mounted() {
      this.arr = this.$route.params.arr
      this.orders = this.$route.params.orders
      console.log(this.arr, this.orders);
      this.getchangeSearchFlight();
    },
  };
</script>

<style>
  .fli_list {
    height: 100vh;
    /* margin: 50px 0 0 173px; */
    padding: 30px 0 0 30px;
  }

  .sma_box {
    background: #ffffff;
  }

  .sma_boxed {
    display: flex;
    justify-content: space-evenly;
    border-bottom: 2px solid #cccccc;
    width: 90%;
    padding: 10px 0px;
    align-items: center;
  }

  .f_box {
    display: flex;
    width: 110px;
    justify-content: space-between;
  }

  .f_box_t {
    display: flex;
    width: 300px;
    justify-content: space-between;
  }

  .f_box_f {
    display: flex;
    align-items: center;
    width: 174px;
    justify-content: space-evenly;
  }

  .box_o {
    display: flex;
    width: 133px;
    justify-content: space-around;
    align-items: flex-start;
    align-items: center;
    height: 100%;
  }

  .o_l {
    width: 20px;
    height: 20px;
    display: flex;
  }

  .o_r {
    display: flex;
    flex-direction: column;
  }

  .box_s {
    display: flex;
    width: 283px;
    justify-content: space-between;
  }

  .box_time {
    font-weight: bold;
    font-size: 20px;
  }

  .namesed {
    font-size: 16px;
    text-align: right;
  }

  .namesed {
    font-size: 16px;
    text-align: left;
  }

  .box_th {
    width: 189px;
    height: 44px;
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    justify-content: center;
    align-items: center;
  }

  .box_th img {
    width: 100px;
    height: 11px;
  }

  .image {
    width: 100%;
    height: 20px;
  }

  .box_f {
    display: flex;
    width: 257px;
    justify-content: space-between;
    height: 100%;
    align-items: center;
  }

  .f_top {
    flex-shrink: 0;
  }

  .top_mon {
    color: #2f80ed;
  }

  .top_mon {
    font-weight: bold;
  }

  .moneyed {
    font-size: 24px;
  }

  .money {
    color: #f18437;
    font-size: 24px;
  }

  .fli_box {
    display: flex;
    justify-content: space-evenly;
    width: 90%;
    height: 80px;
    align-items: center;
  }

  .box_t {
    color: #f18437;
    border: 1px solid #f18437;
    padding: 0px 7px;
    border-radius: 4px;
  }

  .f_box_t {}

  .t_text {
    /* width: 80px; */
    color: #f2994a;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 130px;
  }

  .t_text1 {
    color: #2f80ed;
  }

  .t_text2 {}

  .f_box_s {
    display: flex;
    flex-direction: column;
  }

  .s_quan {
    display: flex;
    align-items: center;
    width: 86px;
    justify-content: space-between;
  }

  .quan_img {
    width: 30px;
    height: 20px;
  }

  .f_seat {
    color: #9acb94;
  }

  .primary {
    background: #f5b14e;
    border: 1px solid #f5b14e;
  }
</style>